<template>
  <div class="bodycontainer">

    <el-collapse v-model="activeNames" @change="handleChange" class='collview'>
<p v-for="(item,key) in userData" :key="key">
 <el-collapse-item :name="item.id">
    <template slot="title" >
   <i class="header-icon el-icon-info"></i>  {{item.pname}}
    </template>
   
    <el-table
      :data="item.get_users"
       border
      style="width: 100%" v-if="item.get_users.length>0">
 
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="帐号">
      </el-table-column>
        <el-table-column
        prop="login_num"
        label="登陆次数"
        width="160">
      </el-table-column>
           <el-table-column
        label="最近登陆日期"
        width="160">
          <template slot-scope="scope" >
           <span>{{scope.row.last_login_time|parseTime}}</span>
         </template>
      </el-table-column>
       <el-table-column prop="operation" label="操作 ">
        <template slot-scope="scope" >
         <el-button size="small" type="primary"  @click="handleUpdate(scope.row)">编辑</el-button>
     
          <el-button size="small" type="danger" @click="deleteUpdate(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-collapse-item>
</p>
    <el-dialog title="修改信息" :visible.sync="isShowEditVisible"  :modal-append-to-body='false'>
      <el-form label-width="100px" :model="temp" :rules="rules"  ref="ruleForm"  class="demo-ruleForm">
            <el-form-item label="请选择部门" prop="pid"  >
 

           <el-select v-model="temp.pid" placeholder="请选择部门">
              <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.pname"
          :value="item.id">
        </el-option>
        </el-select>
          </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="temp.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="temp.mobile"></el-input>
        </el-form-item>
     
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEditVisible = false">取消</el-button>
        <el-button type="primary"  @click="updateData" class="title1">确定</el-button>
      </div>
    </el-dialog>
  
    <el-pagination

      @current-change="handleCurrentChange"
      :current-page="currentPage2"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
</el-collapse>

  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      rules: {
        username: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 55, message: '长度在 2 到 55 个字符', trigger: 'blur' }
        ],

        mobile: [
          {
            required: true,
            min: 10,
            max: 15,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        partment: [{ required: true, message: '请选择部门' }]
      },
      pid: '',
      activeNames: [],
      userData: [],
      listLoading: true,
      temp: { pid: '' },
      currentPage2: 1,
      pageSize: 10,
      total: 10,
      isShowEditVisible: false,
      deleteVisible: false
    }
  },
  methods: {
    fetchData() {
      var that = this
      var page = this.currentPage2
      const data = {
        page: page
      }
      that
        .$request({
          url: '/admin/partmentuser',
          method: 'post',
          data
        })
        .then(res => {
          if (res.code == 200) {
            that.userData = res.data
            that.total = res.count
          }
        })
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage2 = val

      this.fetchData()
    },
    handleChange(val) {},
    getPartment() {
      var that = this
      that
        .$request({
          url: '/admin/get_department',
          method: 'post'
        })
        .then(res => {
          if (res.code == 200) {
            that.options = res.data
          }
        })
    },
    deleteUpdate(row) {
      var that = this
      this.$confirm('此操作将删除一名用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var info = Object.assign({}, row)

          that.delAdmin(info)
        })
        .catch(() => {})
    },
    delAdmin(info) {
      var that = this
      var uid = localStorage.getItem('uid')
      if (info.uid && uid) {
        const data = {
          uid: uid,
          aid: info.uid
        }
        that
          .$request({
            url: '/admin/deladmin',
            method: 'post',
            data
          })
          .then(res => {
            if (res.code == 200) {
              this.isShowEditVisible = false
              this.currentPage2 = 1
              that.fetchData()
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            }
          })
      }
    },
    updateAdmin(data) {
      var that = this
      that
        .$request({
          url: '/admin/updateAdmin',
          method: 'post',
          data
        })
        .then(res => {
          if (res.code == 200) {
            this.isShowEditVisible = false
            this.currentPage2 = 1
            that.fetchData()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }
        })
    },
    handleUpdate(row) {
      this.isShowEditVisible = true

      this.temp = Object.assign({}, row)

      console.log(this.temp)
    },
    submitDelete() {
      const tempData = Object.assign({}, this.temp)

      for (const v of this.tableList) {
        if (v.uid === this.temp.uid) {
          const index = this.tableList.indexOf(v)
          this.tableList.splice(index, 1)
          this.fetchData()
          console.log(this.tableList)
          break
        }
      }
      this.deleteVisible = false
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
    },

    updateData() {
      const tempData = Object.assign({}, this.temp)

      tempData.aid = tempData.uid
      tempData.uid = localStorage.getItem('uid')
      this.updateAdmin(tempData)
    }
  },
  mounted() {
    this.fetchData()
    this.getPartment()
  }
}
</script>
<style  scode>
.bodycontainer {
  width: 90%;
  margin: 10px auto;
  height: auto;
}
el-dialog {
  z-index: 9999;
}
.collview {
  width: 100%;
  height: 85vh;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-bottom: 200px;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {
  display: none;
}
</style>
